<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
    <link rel="stylesheet" th:href="@{/src/zTree_v3/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>
<form class="layui-form" style="width:80%;" id="arf">
    <!-- 权限提交隐藏域 -->
    <input type="hidden" id="menuId" name="menuId"/>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" class="layui-input userName" lay-verify="required"
                   placeholder="请输入角色名" name="roleName">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入角色描述" class="layui-textarea linksDesc"
                      lay-verify="required" name="roleRemark" ></textarea>
        </div>
    </div>
    <!--权限树xtree  -->
    <div class="layui-form-item">
        <label class="layui-form-label">分配权限：</label>
        <ul id="xtree" class="ztree" style="width:200px;margin-left: 105px"></ul>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="button" class="layui-btn" lay-submit="" lay-filter="editRole" value="立即提交"/>
        </div>
    </div>
</form>

<script th:src="@{/src/jquery-1.9.1.min.js}"></script>
<script th:src="@{/src/zTree_v3/js/jquery.ztree.all.js}"></script>
<script th:src="@{/src/layui.js}"></script>

<script>
    layui.use(['form','layer'],function () {


        var form = layui.form,
          //  $ = layui.jquery,
            layer = layui.layer;

        form.on('submit(editRole)',function (data) {
            //获取选中tree节点的id
            var treeObj = $.fn.zTree.getZTreeObj("xtree");
            var nodes = treeObj.getCheckedNodes(true);
            var keys = "";
            $.each(nodes,function (index,obj) {
                keys += obj.menuId+",";
            })
            keys = keys.substring(0,keys.length-1);
           // alert(keys);
            $("#menuId").val(keys);
            //添加角色
            //console.log($("#arf").serialize());
            $.ajax({
                url:'/roles/saveRoles',
                type:'post',
                dataType:'json',
                data:$("#arf").serialize(),//data.field,  roleName=qq&roleRemark=11
              // contentType:'application/json;charset=utf-8',
                success:function (res) {
                    if(res.code == 200){
                        layer.msg('添加成功',{icon:1},function () {
                            top.layer.closeAll("iframe");
                            parent.location.reload();
                        })
                    }else{
                        layer.msg(res.message,{icon:5});
                    }
                }
            })
            return false;
        })
    })



    $(function () {
        setting={
            data:{
                simpleData:{
                    enable:true,
                    idKey:'menuId',  //节点自身的id
                    pIdKey:'parentId'  //节点的父Id
                },
                key:{
                    name:'title',
                    title:'title'
                }
            },
            check:{
                enable:true
            },
            view:{
                showIcon:false
            }

        }

        $.ajax({
            url:'/menu/loadTree',
            dataType:'json',
            success:function (res) {// res==> [{mendId:1,title:'用户管理',parentId:0}]
                $.fn.zTree.init($("#xtree"),setting,res);
            }
        })
    })
</script>









</body>
</html>